<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精美手机分期计算器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            color: #2c3e50;
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }
         .bt {
             font-size: 48px;
            background: linear-gradient(to right, #FFD700, #FFA500);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: red; /* Fallback color for non-WebKit browsers */
        }
        
        .description {
            font-size: 1.2rem;
            color: #7f8c8d;
            margin-bottom: 20px;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .input-section {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin-bottom: 40px;
            flex-wrap: wrap;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .input-group {
            flex: 1;
            min-width: 300px;
        }
        
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: white;
            font-size: 1.1rem;
        }
        
        input {
            width: 100%;
            padding: 18px 20px;
            border: none;
            border-radius: 12px;
            font-size: 1.2rem;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        input:focus {
            outline: none;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            transform: translateY(-2px);
        }
        
        .calculate-btn {
            padding: 18px 35px;
            background: linear-gradient(to right, #ff9a9e, #fad0c4);
            color: #2c3e50;
            border: none;
            border-radius: 12px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .calculate-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
        }
        
        .calculate-btn:active {
            transform: translateY(1px);
        }
        
        .results-container {
            display: flex;
            gap: 25px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .result-card {
            flex: 1;
            min-width: 350px;
            background: white;
            padding: 25px;
            border-radius: 18px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            position: relative;
            overflow: hidden;
        }
        
        .result-card:hover {
            transform: translateY(-5px);
        }
        
        .card-50 {
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
        }
        
        .card-40 {
            background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
        }
        
        .card-30 {
            background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
        }
        
        .result-card h2 {
            text-align: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.5);
            color: #2c3e50;
            font-size: 1.8rem;
            position: relative;
        }
        
        .result-card h2::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 2px;
        }
        
        .installment-plan {
            margin-top: 20px;
        }
        
        .installment-plan h3 {
            margin-bottom: 15px;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .installment-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 15px;
            margin-bottom: 10px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.2s;
        }
        
        .installment-item:hover {
            transform: translateX(5px);
            background-color: rgba(255, 255, 255, 0.9);
        }
        
        .highlight {
            font-weight: bold;
        }
        
        .highlight-50 {
            color: #e74c3c;
        }
        
        .highlight-40 {
            color: #3498db;
        }
        
        .highlight-30 {
            color: #27ae60;
        }
        
        .summary {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 15px;
            border-radius: 12px;
            margin-top: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .summary-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            font-size: 1.1rem;
        }
        
        footer {
            text-align: center;
            color: white;
            margin-top: 40px;
            padding: 20px;
            font-size: 1rem;
            opacity: 0.8;
        }
        
        @media (max-width: 768px) {
            .results-container {
                flex-direction: column;
            }
            
            .input-section {
                flex-direction: column;
            }
            
            .input-group {
                width: 100%;
            }
            
            h1 {
                font-size: 2.2rem;
            }
        }
        
        .badge {
            position: absolute;
            top: 0;
            right: 0;
            padding: 8px 15px;
            border-bottom-left-radius: 15px;
            font-weight: bold;
            color: white;
            font-size: 0.9rem;
        }
        
        .badge-50 {
            background: rgba(231, 76, 60, 0.9);
        }
        
        .badge-40 {
            background: rgba(52, 152, 219, 0.9);
        }
        
        .badge-30 {
            background: rgba(39, 174, 96, 0.9);
        }
        
        .icon {
            font-size: 1.2rem;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
             <h1>📱 <span class="bt">沽沽租（租机计算器）</span></h1>
           <p class="description">只需输入手机售价，自动计算三种首付比例的分期方案</p>
        </header>
        
        <div class="input-section">
            <div class="input-group">
                <label for="phone-price"><i class="fas fa-tag icon"></i> 手机售价 (元)</label>
                <input type="number" id="phone-price" placeholder="请输入手机售价" min="0" value="4000">
            </div>
            <button class="calculate-btn" onclick="calculateAll()">
                <i class="fas fa-calculator"></i> 计算分期方案
            </button>
        </div>
        
        <div class="results-container">
            <!-- 首付50%方案 -->
            <div class="result-card card-50">
                <div class="badge badge-50">最受欢迎</div>
                <h2><i class="fas fa-percentage"></i> 首付50%方案</h2>
                <div class="installment-plan">
                    <h3><i class="fas fa-calendar-week"></i> 3期还款计划</h3>
                    <div id="installment-50-3"></div>
                    
                    <h3><i class="fas fa-calendar-week"></i> 6期还款计划</h3>
                    <div id="installment-50-6"></div>
                    
                    <h3><i class="fas fa-calendar-week"></i> 9期还款计划</h3>
                    <div id="installment-50-9"></div>
                </div>
            </div>
            
            <!-- 首付40%方案 -->
            <div class="result-card card-40">
                <h2><i class="fas fa-percentage"></i> 首付40%方案</h2>
                <div class="installment-plan">
                    <h3><i class="fas fa-calendar-week"></i> 3期还款计划</h3>
                    <div id="installment-40-3"></div>
                    
                    <h3><i class="fas fa-calendar-week"></i> 6期还款计划</h3>
                    <div id="installment-40-6"></div>
                    
                    <h3><i class="fas fa-calendar-week"></i> 9期还款计划</h3>
                    <div id="installment-40-9"></div>
                </div>
            </div>
            
            <!-- 首付30%方案 -->
            <div class="result-card card-30">
                <div class="badge badge-30">低首付</div>
                <h2><i class="fas fa-percentage"></i> 首付30%方案</h2>
                <div class="installment-plan">
                    <h3><i class="fas fa-calendar-week"></i> 3期还款计划</h3>
                    <div id="installment-30-3"></div>
                    
                    <h3><i class="fas fa-calendar-week"></i> 6期还款计划</h3>
                    <div id="installment-30-6"></div>
                    
                    <h3><i class="fas fa-calendar-week"></i> 9期还款计划</h3>
                    <div id="installment-30-9"></div>
                </div>
            </div>
        </div>
    </div>
    
    <footer>
        <p>© 2023 手机分期付款计算器 | 计算结果仅供参考，实际金额可能因商家政策有所不同</p>
    </footer>

    <script>
        function calculateAll() {
            const price = parseFloat(document.getElementById('phone-price').value);
            
            // 验证输入
            if (isNaN(price) || price <= 0) {
                alert('请输入有效的手机价格');
                return;
            }
            
            // 计算50%首付方案
            calculateScheme(50, price, '50');
            
            // 计算40%首付方案
            calculateScheme(40, price, '40');
            
            // 计算30%首付方案
            calculateScheme(30, price, '30');
        }
        
        function calculateScheme(rate, price, suffix) {
            // 计算3期
            const downPayment3 = price * (rate/100);
            let multiplier3;
            if (rate === 50) multiplier3 = 1.1;
            else if (rate === 40) multiplier3 = 1.2;
            else if (rate === 30) multiplier3 = 1.3;
            
            const monthlyPayment3 = (price * multiplier3 - downPayment3) / 2;
            const totalPayment3 = downPayment3 + monthlyPayment3 * 2;
            
            // 计算6期
            const downPayment6 = price * (rate/100);
            let multiplier6;
            if (rate === 50) multiplier6 = 1.15;
            else if (rate === 40) multiplier6 = 1.25;
            else if (rate === 30) multiplier6 = 1.35;
            
            const monthlyPayment6 = (price * multiplier6 - downPayment6) / 5;
            const totalPayment6 = downPayment6 + monthlyPayment6 * 5;
            
            // 计算9期
            const downPayment9 = price * (rate/100);
            let multiplier9;
            if (rate === 50) multiplier9 = 1.2;
            else if (rate === 40) multiplier9 = 1.3;
            else if (rate === 30) multiplier9 = 1.4;
            
            const monthlyPayment9 = (price * multiplier9 - downPayment9) / 8;
            const totalPayment9 = downPayment9 + monthlyPayment9 * 8;
            
            // 更新3期显示
            document.getElementById(`installment-${suffix}-3`).innerHTML = `
                <div class="installment-item">第一期: <span class="highlight highlight-${suffix}">${downPayment3.toFixed(2)} 元</span> (首付${rate}%)</div>
                <div class="installment-item">第二期: <span>${monthlyPayment3.toFixed(2)} 元</span></div>
                <div class="installment-item">第三期: <span>${monthlyPayment3.toFixed(2)} 元</span></div>
                <div class="summary">
                    <div class="summary-item">总支付: <span class="highlight highlight-${suffix}">${totalPayment3.toFixed(2)} 元</span></div>
                </div>
            `;
            
            // 更新6期显示
            document.getElementById(`installment-${suffix}-6`).innerHTML = `
                <div class="installment-item">第一期: <span class="highlight highlight-${suffix}">${downPayment6.toFixed(2)} 元</span> (首付${rate}%)</div>
                ${Array.from({length: 5}, (_, i) => 
                    `<div class="installment-item">第${i+2}期: <span>${monthlyPayment6.toFixed(2)} 元</span></div>`
                ).join('')}
                <div class="summary">
                    <div class="summary-item">总支付: <span class="highlight highlight-${suffix}">${totalPayment6.toFixed(2)} 元</span></div>
                </div>
            `;
            
            // 更新9期显示
            document.getElementById(`installment-${suffix}-9`).innerHTML = `
                <div class="installment-item">第一期: <span class="highlight highlight-${suffix}">${downPayment9.toFixed(2)} 元</span> (首付${rate}%)</div>
                ${Array.from({length: 8}, (_, i) => 
                    `<div class="installment-item">第${i+2}期: <span>${monthlyPayment9.toFixed(2)} 元</span></div>`
                ).join('')}
                <div class="summary">
                    <div class="summary-item">总支付: <span class="highlight highlight-${suffix}">${totalPayment9.toFixed(2)} 元</span></div>
                </div>
            `;
        }
        
        // 页面加载时自动计算一次
        window.onload = calculateAll;
        
        // 添加输入框自动计算功能
        document.getElementById('phone-price').addEventListener('input', calculateAll);
    </script>
</body>
</html>